<script setup>
import { reactive, computed, onMounted, onBeforeUnmount, watch } from 'vue'
import { useStore } from 'vuex'
const store = useStore()
const api = store.state.api
const common = store.state.common.obj
const isAnchor = store.state.isAnchor
const props = defineProps({
    tabIndex: Number
})
let tabIndex = props.tabIndex
watch(() => props.tabIndex, (newVal) => {
    tabIndex = newVal
    getInfo()
})
let anchorInfo = reactive({
    result: {}
})
const getInfo = async () => {
    await api.leg3giftTrenchGift({ calendarId: tabIndex, anchorId: isAnchor ? common.userId : common.anchorId }).then(res => {
        if (res.data.result) anchorInfo.result = res.data.result
        else anchorInfo.result = {}
    })
}
const getInfo2 = async () => {
    await api.leg3Day_award({ day: tabIndex - 4, anchorId: isAnchor ? common.userId : common.anchorId }).then(res => {
        if (res.data.result) anchorInfo.result = res.data.result
        else anchorInfo.result = {}
    })
}
const info = computed(() => {
    return anchorInfo.result
})
let timer
onMounted(() => {
    if (tabIndex < 4) {
        getInfo()
    } else {
        getInfo2()
    }
    timer = setInterval(() => {
        if (tabIndex < 4) {
            getInfo()
        } else {
            getInfo2()
        }
    }, 30 * 1000);
})
onBeforeUnmount(() => {
    clearInterval(timer)
})
</script>

<template>
    <div class="rankAward">
        <p class="awardRule">
            根据主播今天累计的有效胜场，可获得对应奖励
        </p>
        <div class="awardImg">
            <div>
                <p class="pkWins"></p>
                <p class="pkTips">每累计<span>{{ info.limitPkWins || 10 }}</span>个有效胜场</p>
            </div>
            <div>奖励</div>
            <div>
                <p><img :src="'https://down.qxiu.com/pic/' + info.baseGoodsId + '_9.png'" alt=""></p>
                <p>{{ info.goodsName }}*1</p>
            </div>
        </div>
        <ul class="awardInfo">
            <li>
                <p>主播昵称</p>
                <p>ID</p>
                <p>今日有效胜场</p>
                <p>奖励</p>
            </li>
            <li>
                <p class="name">{{ info.anchorName || '炫酷牛人' }}</p>
                <p>{{ info.anchorId || common.anchorId }}</p>
                <p>{{ info.todayPkWins || info.scores || 0 }}</p>
                <p v-if="info.haveGotGiftNum">{{ info.haveGotGiftNum || 0 }}</p>
                <p v-else>{{ info.goodsName || 0 }}*{{ info.goodsCount || 0 }}</p>
            </li>
        </ul>
    </div>
</template>

<style lang='scss' scoped></style>